
 <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  
    <title>前端入门4--DOM和BOM | Here. There.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1">
    
    <meta name="author" content="被删">
    
    <meta name="description" content="《前端入门》系列主要为个人对前端一些经验和认识总结。Javascript 包括三块：ECMAScript、DOM和BOM，本文主要介绍 DOM 和 BOM。">
    
    
    
    
    <link rel="alternate" href="/atom.xml" title="Here. There." type="application/atom+xml">
    
    
    <link rel="icon" href="/img/favicon.ico">
    
    
    <link rel="apple-touch-icon" href="/img/pacman.jpg">
    <link rel="apple-touch-icon-precomposed" href="/img/pacman.jpg">
    
    <link rel="stylesheet" href="/css/style.css">
    
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?3d902de4a19cf2bf179534ffd2dd7b7f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</head>

  <body>
    <header>
      <div>
		
			<div id="imglogo">
				<a href="/"><img src="/img/sun.png" alt="Here. There." title="Here. There."/></a>
			</div>
			
			<div id="textlogo">
				<h1 class="site-name"><a href="/" title="Here. There.">Here. There.</a></h1>
				<h2 class="blog-motto">Love ice cream. Love sunshine. Love life. Love the world. Love myself. Love you.</h2>
			</div>
			<div class="navbar"><a class="navbutton navmobile" href="#" title="菜单">
			</a></div>
			<nav class="animated">
				<ul>
					
						<li><a href="/">首页</a></li>
					
						<li><a href="https://github.com/godbasin/godbasin.github.io">所有文章</a></li>
					
						<li><a href="/archives">归档</a></li>
					
						<li><a href="/categories">分类</a></li>
					
						<li><a href="/about">关于我</a></li>
					
				</ul>
			</nav>			
</div>

    </header>
    <div id="container">
      <div id="main" class="post" itemscope itemprop="blogPost">
	<article itemprop="articleBody"> 
		<header class="article-info clearfix">
  <h1 itemprop="name">
    
      <a href="/2018/04/29/front-end-4-dom-bom/" title="前端入门4--DOM和BOM" itemprop="url">前端入门4--DOM和BOM</a>
  </h1>
  <p class="article-author">By
    
      <a href="https://godbasin.github.io" title="被删">被删</a>
    </p>
  <p class="article-time">
    <time datetime="2018-04-29T06:06:40.000Z" itemprop="datePublished">2018-04-29</time>
    更新日期:<time datetime="2018-08-18T12:58:12.327Z" itemprop="dateModified">2018-08-18</time>
    
  </p>
</header>
	<div class="article-content">
		
		
		<div id="toc" class="toc-article">
			<strong class="toc-title">文章目录</strong>
		<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#DOM"><span class="toc-number">1.</span> <span class="toc-text">DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是-DOM"><span class="toc-number">1.1.</span> <span class="toc-text">什么是 DOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM-解析"><span class="toc-number">1.2.</span> <span class="toc-text">DOM 解析</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM接口"><span class="toc-number">1.3.</span> <span class="toc-text">DOM接口</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM-事件流"><span class="toc-number">1.4.</span> <span class="toc-text">DOM 事件流</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#事件捕获"><span class="toc-number">1.4.1.</span> <span class="toc-text">事件捕获</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#事件冒泡"><span class="toc-number">1.4.2.</span> <span class="toc-text">事件冒泡</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#事件委托"><span class="toc-number">1.4.3.</span> <span class="toc-text">事件委托</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#虚拟DOM"><span class="toc-number">1.5.</span> <span class="toc-text">虚拟DOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#参考"><span class="toc-number">1.6.</span> <span class="toc-text">参考</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#BOM"><span class="toc-number">2.</span> <span class="toc-text">BOM</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是BOM"><span class="toc-number">2.1.</span> <span class="toc-text">什么是BOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#BOM与DOM"><span class="toc-number">2.2.</span> <span class="toc-text">BOM与DOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#window对象"><span class="toc-number">2.3.</span> <span class="toc-text">window对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#参考-1"><span class="toc-number">2.4.</span> <span class="toc-text">参考</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#结束语"><span class="toc-number">2.5.</span> <span class="toc-text">结束语</span></a></li></ol></li></ol>
		</div>
		
		<p>《前端入门》系列主要为个人对前端一些经验和认识总结。Javascript 包括三块：ECMAScript、DOM和BOM，本文主要介绍 DOM 和 BOM。<br><a id="more"></a></p>
<h1 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h1><h2 id="什么是-DOM"><a href="#什么是-DOM" class="headerlink" title="什么是 DOM"></a>什么是 DOM</h2><p>文档对象模型 (<code>DOM</code>) 是<code>HTML</code>和<code>XML</code>文档的编程接口。<br><code>DOM</code>将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。</p>
<p>尽管通常会使用<code>JavaScript</code>来访问<code>DOM</code>， 但它并不是<code>JavaScript</code>的一部分，它也可以被其他语言使用。</p>
<h2 id="DOM-解析"><a href="#DOM-解析" class="headerlink" title="DOM 解析"></a>DOM 解析</h2><p>我们常见的<code>HTML</code>元素，在浏览器中会被解析成节点：<br><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/ct_htmltree.gif" alt="image"></p>
<p>在控制台，我们也能比较清晰地看到这样的层级关系：</p>
<p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/%7BEA4AA8AF-DB12-4B48-8A6A-E71099D1A942%7D.png" alt="image"></p>
<p><strong>节点树中的节点彼此拥有层级关系。</strong><br>父（<code>parent</code>）、子（<code>child</code>）和同胞（<code>sibling</code>）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。</p>
<ul>
<li>在节点树中，顶端节点被称为根（<code>root</code>）</li>
<li>每个节点都有父节点、除了根（它没有父节点）</li>
<li>一个节点可拥有任意数量的子</li>
<li>同胞是拥有相同父节点的节点</li>
</ul>
<p><strong>通过<code>HTML DOM</code>，树中的所有节点均可通过<code>JavaScript</code>进行访问。所有<code>HTML</code>元素（节点）均可被修改，也可以创建或删除节点。</strong></p>
<h2 id="DOM接口"><a href="#DOM接口" class="headerlink" title="DOM接口"></a>DOM接口</h2><p><code>DOM</code>接口主要用于操作<code>DOM</code>节点，如常见的增删查改。</p>
<p>在 web 和 XML 页面脚本中使用 DOM 时，一些常用的 API 如下：</p>
<ul>
<li><code>document.getElementById(id)</code>：根据<code>id</code>获取元素</li>
<li><code>document.getElementsByTagName(name)</code>：根据<code>tag</code>获取元素</li>
<li><code>document.createElement(name)</code>：创建元素</li>
<li><code>parentNode.appendChild(node)</code>：添加子元素</li>
<li><code>element.innerHTML</code>：设置/获取元素内容</li>
<li><code>element.styles</code>：设置/获取元素样式</li>
<li><code>element.setAttribute()</code>：设置元素属性值</li>
<li><code>element.getAttribute()</code>：获取元素属性值</li>
<li><code>element.addEventListener()</code>：添加事件绑定</li>
</ul>
<p>通常什么时候会用呢，最常见的便是列表的维护，包括增加新的选项、删除某个、修改某个等等。</p>
<p>在浏览器兼容性问题很多的时候，我们常常会使用<code>jQuery</code>来进行些<code>DOM</code>操作，如今兼容性问题逐渐变少，大家更倾向于用原生<code>DOM</code>接口来进行操作。</p>
<h2 id="DOM-事件流"><a href="#DOM-事件流" class="headerlink" title="DOM 事件流"></a>DOM 事件流</h2><p>事件流所描述的就是从页面中接受事件的顺序。<br><strong>DOM事件流（<code>event  flow</code>）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。</strong></p>
<ol>
<li>捕获阶段：一开始从文档的根节点流向目标对象；</li>
<li>目标阶段：然后在目标对向上被触发；</li>
<li>冒泡阶段：之后再回溯到文档的根节点。</li>
</ol>
<h3 id="事件捕获"><a href="#事件捕获" class="headerlink" title="事件捕获"></a>事件捕获</h3><p>当鼠标点击或者触发 dom 事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。</p>
<p>在事件捕获的概念下在<code>p</code>元素上发生<code>click</code>事件的顺序应该是<code>document -&gt; html -&gt; body -&gt; div -&gt; p</code>。</p>
<h3 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h3><p>与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。</p>
<p>在事件冒泡的概念下在<code>p</code>元素上发生<code>click</code>事件的顺序应该是<code>p -&gt; div -&gt; body -&gt; html -&gt; document</code>。</p>
<p><strong><code>DOM</code>标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发 dom 事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。</strong></p>
<p>不同的浏览器对此有着不同的实现，IE10 及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。</p>
<p>曾经踩过 IE9 中<code>button</code>的坑，例如<code>&lt;button&gt;&lt;span&gt;&lt;/span&gt;&lt;/button&gt;</code>，如果我们分别在<code>button</code>以及<code>span</code>里均绑定<code>click</code>事件，则<code>span</code>的事件不会被触发。不知道这个跟事件机制是否相关呢？</p>
<p><strong>addEventListener</strong><br><code>addEventListener</code>的第三个参数就是为冒泡和捕获准备的.<br><code>addEventListener</code>有三个参数：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">element.addEventListener(event, <span class="function"><span class="keyword">function</span>, <span class="title">useCapture</span>)</span></div></pre></td></tr></table></figure>
<ul>
<li><code>event</code>：需要绑定的事件</li>
<li><code>function</code>：触发事件后要执行的函数</li>
<li><code>useCapture</code>：默认值是false，表示在事件冒泡阶段调用事件处理函数。如果参数为true，则表示在事件捕获阶段调用处理函数。</li>
</ul>
<h3 id="事件委托"><a href="#事件委托" class="headerlink" title="事件委托"></a>事件委托</h3><p>基于事件冒泡机制，我们可以实现将子元素的事件委托给父级元素来进行处理。<br>当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。</p>
<p>这样能解决什么问题呢？</p>
<ol>
<li>绑定子元素会绑定很多次的绑定，而绑定父元素只需要一次绑定。</li>
<li>将事件委托给父节点，这样我们对子元素的增加和删除、移动等，都不需要重新进行事件绑定。</li>
</ol>
<p>很常见的就是我们有个列表，每个选项都可以进行编辑、删除、添加标签等功能，而把事件委托给父元素或者<code>document</code>，不管我们新增、删除、更新选项，都不需手动去绑定和移除事件。</p>
<p>最常在<code>jQuery</code>中使用事件委托：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">$(<span class="string">"#my-list"</span>).delegate(<span class="string">"button"</span>, <span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">  <span class="comment">// "$(this)"是被click的元素</span></div><div class="line">  <span class="built_in">console</span>.log(<span class="string">"you clicked a button"</span>,$(<span class="keyword">this</span>));</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p>现在我们基本上都使用框架了，我们可以随意地在元素上绑定事件，如 Vue 中<code>&lt;div @click=&quot;myClickEvent&quot; /&gt;</code>，因为框架会帮我们用事件委托的方式处理掉，大部分都会绑定在最外层初始化的<code>id</code>元素，或者是<code>document</code>吧。</p>
<h2 id="虚拟DOM"><a href="#虚拟DOM" class="headerlink" title="虚拟DOM"></a>虚拟DOM</h2><p>一个<code>DOM</code>节点元素，其实是很复杂的，包含了很多的属性和方法。</p>
<p>我们来简单打印一下一个<code>DOM</code>元素：<br><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/1512633321%281%29.png" alt="image"></p>
<p>看到右边的滚动条了没，有如此之多的属性。</p>
<p>所以随着应用程序越来越复杂，<code>DOM</code>操作越来越频繁，需要监听事件和在事件回调用更新页面的DOM操作也越来越多，性能消耗则会比较大。于是乎，虚拟<code>DOM</code>的想法便被人提出并实现了。</p>
<p>虚拟<code>DOM</code>其实是用来模拟真实<code>DOM</code>的中间产物，主要包括以下功能：</p>
<p><strong>1. 用<code>JS</code>对象模拟<code>DOM</code>树，简化<code>DOM</code>对象。</strong></p>
<p>简单来说，就是用一个对象模拟，保留主要的一些<code>DOM</code>属性，其他的则去掉。</p>
<p><strong>2. 使用虚拟<code>DOM</code>，结合操作<code>DOM</code>的接口，来生成真实<code>DOM</code>。</strong></p>
<p>使用假<code>DOM</code>生成真<code>DOM</code>，同时保持真实<code>DOM</code>对象的引用，以便3步骤的执行。</p>
<p><strong>3. 更新<code>DOM</code>时，比较两棵虚拟<code>DOM</code>树的差异，局部更新真实<code>DOM</code>。</strong></p>
<p>这个就比较有意思，可以根据数据的变化，来最小化地移动、替换、删除原有的<code>DOM</code>元素。</p>
<p>结合使用以上功能，便能在复杂应用中更好地维护了。</p>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a href="http://www.jb51.net/article/55851.htm" target="_blank" rel="external">《javascript学习笔记（三）BOM和DOM详解》</a><br><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction" target="_blank" rel="external">DOM | MDN</a><br><a href="https://coolshell.cn/articles/9666.html" target="_blank" rel="external">《浏览器的渲染原理简介》</a><br><a href="http://www.cnblogs.com/bfgis/p/5460191.html" target="_blank" rel="external">《JavaScript 详说事件机制之冒泡、捕获、传播、委托》</a></p>
<h1 id="BOM"><a href="#BOM" class="headerlink" title="BOM"></a>BOM</h1><h2 id="什么是BOM"><a href="#什么是BOM" class="headerlink" title="什么是BOM"></a>什么是BOM</h2><p><code>BOM</code>是<code>Browser Object Model</code>，浏览器对象模型。主要处理浏览器窗口和框架，不过通常浏览器特定的<code>JavaScript</code>扩展都被看做<code>BOM</code>的一部分。<br><code>BOM</code>是各个浏览器厂商根据<code>DOM</code>在各自浏览器上的实现，表现为不同浏览器定义有差别，实现方式不同。</p>
<p><code>javacsript</code>是通过访问<code>BOM</code>对象来访问、控制、修改客户端(浏览器)。</p>
<h2 id="BOM与DOM"><a href="#BOM与DOM" class="headerlink" title="BOM与DOM"></a>BOM与DOM</h2><p><code>DOM</code>（<code>Document Object Model</code>文档对象模型）是为了操作文档出现的<code>API</code>，包括<code>document</code>。<br><code>BOM</code>（<code>Browser Object Model</code>浏览器对象模型）是为了操作浏览器出现的<code>API</code>，包括<code>window</code>/<code>location</code>/<code>history</code>等。</p>
<p>由于<code>BOM</code>的<code>window</code>包含了<code>document</code>，换个角度讲，<code>BOM</code>包含了<code>DOM</code>(对象)，浏览器提供出来给予访问的是<code>BOM</code>对象，从<code>BOM</code>对象再访问到<code>DOM</code>对象，从而<code>js</code>可以操作浏览器以及浏览器读取到的文档。</p>
<p>以上都是一些默认或是传说，但其实浏览器对象模型<code>BOM</code>尚无正式标准。</p>
<h2 id="window对象"><a href="#window对象" class="headerlink" title="window对象"></a>window对象</h2><p>所有浏览器都支持<code>window</code>对象。它表示浏览器窗口。<br>所有<code>JavaScript</code>全局对象、函数以及变量均自动成为<code>window</code>对象的成员。<br>全局变量是<code>window</code>对象的属性，全局函数是<code>window</code>对象的方法。</p>
<p><code>window</code>对象包括：</p>
<ul>
<li><code>window.screen</code>对象：包含有关用户屏幕的信息</li>
<li><code>window.location</code>对象：用于获得当前页面的地址(URL)，并把浏览器重定向到新的页面</li>
<li><code>window.history</code>对象：浏览历史的前进后退等</li>
<li><code>window.navigator</code>对象：常常用来获取浏览器信息、是否移动端访问等等</li>
<li><code>JavaScript</code>消息框：<code>alert()</code>等</li>
<li><code>JavaScript</code>计时：<code>setTimeout()</code>等</li>
</ul>
<h2 id="参考-1"><a href="#参考-1" class="headerlink" title="参考"></a>参考</h2><p><a href="http://www.jb51.net/article/55851.htm" target="_blank" rel="external">《javascript学习笔记（三）BOM和DOM详解》</a></p>
<h2 id="结束语"><a href="#结束语" class="headerlink" title="结束语"></a>结束语</h2><hr>
<p>DOM 和 BOM，会在我们日常实战中会经常用到，但是很多时候我们都只觉得自己在使用 Javascript。<br>当我们开始写 node.js 的时候，才会发现其中很多的不一致吧~</p>
  
		
		<p style="margin-top:50px;">查看Github有更多内容噢：<a href="https://github.com/godbasin">https://github.com/godbasin</a></p>
	</div>
	<img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" width="200" height="200" style="display:block;margin: 0 auto;" />
	<p style="text-align: center;margin-top: 10px;margin-bottom: 20px;">码生艰难，写文不易，给我家猪囤点猫粮了喵~</p>
	<div class="author-right">
  		<p>作者：被删</p>
  		<p>出处：<a href="https://godbasin.github.io">https://godbasin.github.io</a></p>
  		<p>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</p>
	</div>
		<footer class="article-footer clearfix">

  <div class="article-tags">
  
  <span></span> <a href="/tags/分享/">分享</a>
  </div>


<div class="article-categories">
  <span></span>
  <a class="article-category-link" href="/categories/js什锦/">js什锦</a>
</div>



<div class="article-share" id="share">

  
<!-- JiaThis Button BEGIN -->
<div class="jiathis_style_24x24">
	<a class="jiathis_button_qzone"></a>
	<a class="jiathis_button_tsina"></a>
	<a class="jiathis_button_tqq"></a>
	<a class="jiathis_button_weixin"></a>
	<a class="jiathis_button_renren"></a>
	<a href="http://www.jiathis.com/share?uid=2134021" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
</div>
<script type="text/javascript">
var jiathis_config = {data_track_clickback:'true'};
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code_mini/jia.js?uid=2134021" charset="utf-8"></script>
<!-- JiaThis Button END -->   


</div>
</footer>   	       
	</article>
	
<nav class="article-nav clearfix">
 
 <div class="prev" >
 <a href="/2018/05/05/front-end-5-javascript/" title="前端入门5--Javascript">
  <strong>PREVIOUS:</strong><br/>
  <span>
  前端入门5--Javascript</span>
</a>
</div>


<div class="next">
<a href="/2018/04/21/front-end-3-html-css/"  title="前端入门3--HTML和CSS">
 <strong>NEXT:</strong><br/> 
 <span>前端入门3--HTML和CSS
</span>
</a>
</div>

</nav>

	<!-- 如果不是首页且没使用 `comments: false` 关闭评论，则尝试加载评论 -->

    <!-- 配置中启用多说时，导入相应代码 -->
    


</div>  
      <div class="openaside"><a class="navbutton" href="#" title="显示侧边栏"></a></div>

  <div id="toc" class="toc-aside">
  <strong class="toc-title">文章目录</strong>
  <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#DOM"><span class="toc-number">1.</span> <span class="toc-text">DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是-DOM"><span class="toc-number">1.1.</span> <span class="toc-text">什么是 DOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM-解析"><span class="toc-number">1.2.</span> <span class="toc-text">DOM 解析</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM接口"><span class="toc-number">1.3.</span> <span class="toc-text">DOM接口</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM-事件流"><span class="toc-number">1.4.</span> <span class="toc-text">DOM 事件流</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#事件捕获"><span class="toc-number">1.4.1.</span> <span class="toc-text">事件捕获</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#事件冒泡"><span class="toc-number">1.4.2.</span> <span class="toc-text">事件冒泡</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#事件委托"><span class="toc-number">1.4.3.</span> <span class="toc-text">事件委托</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#虚拟DOM"><span class="toc-number">1.5.</span> <span class="toc-text">虚拟DOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#参考"><span class="toc-number">1.6.</span> <span class="toc-text">参考</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#BOM"><span class="toc-number">2.</span> <span class="toc-text">BOM</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#什么是BOM"><span class="toc-number">2.1.</span> <span class="toc-text">什么是BOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#BOM与DOM"><span class="toc-number">2.2.</span> <span class="toc-text">BOM与DOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#window对象"><span class="toc-number">2.3.</span> <span class="toc-text">window对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#参考-1"><span class="toc-number">2.4.</span> <span class="toc-text">参考</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#结束语"><span class="toc-number">2.5.</span> <span class="toc-text">结束语</span></a></li></ol></li></ol>
  </div>

<div id="asidepart">
<div class="closeaside"><a class="closebutton" href="#" title="隐藏侧边栏"></a></div>
<aside class="clearfix">

  	
	<div class="archiveslist">
		<p class="asidetitle">最近文章</p>
			<ul class="archive-list">
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/07/11/vue-for-everyone-2/" title="9102全员学Vue--2.怎么三两下拼出一个页面">9102全员学Vue--2.怎么三两...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/06/30/about-front-end-2-principle/" title="前端这几年--2.工作原则和选择">前端这几年--2.工作原则和选择...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/06/27/vue-for-everyone-1/" title="9102全员学Vue--1.如何理解前端和Vue">9102全员学Vue--1.如何理解...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/06/17/wxapp-latest-20190617/" title="小程序开发月刊第六期（20190617）">小程序开发月刊第六期（2019061...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/06/17/wxapp-generate/" title="小程序的诞生">小程序的诞生</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/05/15/wxapp-latest-20190515/" title="小程序开发月刊第五期（20190515）">小程序开发月刊第五期（2019051...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/04/15/wxapp-latest-20190415/" title="小程序开发月刊第四期（20190415）">小程序开发月刊第四期（2019041...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/04/13/about-front-end-1-begin-in/" title="前端这几年--1.转岗之路">前端这几年--1.转岗之路...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/03/15/wxapp-latest-20190315/" title="小程序开发月刊第三期（20190315）">小程序开发月刊第三期（2019031...</a>
				</li>
				
			
					
				<li class="archive-list-item">
					<a class="archive-list-link" href="/2019/03/10/work-2-article/" title="写文章这件事">写文章这件事</a>
				</li>
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
				
			
			</ul>
	</div>


  
  <div class="archiveslist">
    <p class="asidetitle"><a href="/archives">归档</a></p>
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">七月 2019</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">六月 2019</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">五月 2019</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">四月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">三月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/02/">二月 2019</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/01/">一月 2019</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/12/">十二月 2018</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/11/">十一月 2018</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/10/">十月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/09/">九月 2018</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/08/">八月 2018</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/07/">七月 2018</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">六月 2018</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/05/">五月 2018</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/04/">四月 2018</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/03/">三月 2018</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/02/">二月 2018</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/01/">一月 2018</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/12/">十二月 2017</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/11/">十一月 2017</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/10/">十月 2017</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/09/">九月 2017</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/08/">八月 2017</a><span class="archive-list-count">11</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/07/">七月 2017</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/06/">六月 2017</a><span class="archive-list-count">10</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/05/">五月 2017</a><span class="archive-list-count">15</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/04/">四月 2017</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/03/">三月 2017</a><span class="archive-list-count">10</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/02/">二月 2017</a><span class="archive-list-count">41</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/01/">一月 2017</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/12/">十二月 2016</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/11/">十一月 2016</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/10/">十月 2016</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/09/">九月 2016</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">八月 2016</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">七月 2016</a><span class="archive-list-count">14</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/06/">六月 2016</a><span class="archive-list-count">9</span></li></ul>
  </div>


  
<div class="archiveslist">
	<p class="asidetitle"><a href="/categories">分类</a></p>
		<ul class="archive-list">
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/CSS炒饭/" title="CSS炒饭">CSS炒饭<sup>3</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/D3小馒头/" title="D3小馒头">D3小馒头<sup>8</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/angular2火锅/" title="angular2火锅">angular2火锅<sup>25</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/angular混搭/" title="angular混搭">angular混搭<sup>33</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/box2djs方糖/" title="box2djs方糖">box2djs方糖<sup>34</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/cyclejs哈根达斯/" title="cyclejs哈根达斯">cyclejs哈根达斯<sup>8</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/jQuery杂烩/" title="jQuery杂烩">jQuery杂烩<sup>3</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/js什锦/" title="js什锦">js什锦<sup>26</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/react沙拉/" title="react沙拉">react沙拉<sup>16</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/three-js奶茶/" title="three.js奶茶">three.js奶茶<sup>5</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/vue八宝粥/" title="vue八宝粥">vue八宝粥<sup>28</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/webpack宾治/" title="webpack宾治">webpack宾治<sup>9</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/web乱炖/" title="web乱炖">web乱炖<sup>2</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/前端满汉全席/" title="前端满汉全席">前端满汉全席<sup>8</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/喵/" title="喵">喵<sup>1</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/小程序双皮奶/" title="小程序双皮奶">小程序双皮奶<sup>21</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/工作这杯茶/" title="工作这杯茶">工作这杯茶<sup>4</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/应用巧克力盒/" title="应用巧克力盒">应用巧克力盒<sup>2</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/思想棉花糖/" title="思想棉花糖">思想棉花糖<sup>8</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/柴米油盐工具集/" title="柴米油盐工具集">柴米油盐工具集<sup>1</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/categories/非前端钙片/" title="非前端钙片">非前端钙片<sup>7</sup></a>
			</li>
		
		</ul>
</div>


  
<div class="archiveslist">
	<p class="asidetitle">标签</p>
		<ul class="archive-list">
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/分享/" title="分享">分享<sup>44</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/原创部件/" title="原创部件">原创部件<sup>1</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/心态/" title="心态">心态<sup>4</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/教程/" title="教程">教程<sup>65</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/晒猫/" title="晒猫">晒猫<sup>1</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/笔记/" title="笔记">笔记<sup>121</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/算法/" title="算法">算法<sup>9</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/自制插件/" title="自制插件">自制插件<sup>2</sup></a>
			</li>
		
			<li class="archive-list-item">
				<a class="archive-list-link" href="/tags/逻辑实现/" title="逻辑实现">逻辑实现<sup>5</sup></a>
			</li>
		
		</ul>
</div>


    <div class="archiveslist">
    <p class="asidetitle"><a href="/archives">about</a></p>
      <ul class="archive-list">
      	<li class="archive-list-item">
      		<a>wangbeishan@163.com</a>
      		<a href="https://github.com/godbasin">github.com/godbasin</a>
      	</li>
      </ul>
  </div>

  <div class="rsspart">
	<a href="/atom.xml" target="_blank" title="rss">RSS 订阅</a>
</div>

</aside>
</div>
    </div>
    <footer><div id="footer" >
	
	<section class="info">
		<p> 即使梦想再小，却很伟大 ^_^ </p>
	</section>
	 
		<p class="copyright">Powered by <a href="http://hexo.io" target="_blank" title="hexo">hexo</a> and Theme by <a href="https://github.com/A-limon/pacman" target="_blank" title="Pacman">Pacman</a> © 2019 
		
		<a href="https://godbasin.github.io" target="_blank" title="被删">被删</a>
		
		</p>
</div>
</footer>
    <script src="/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  $('.navbar').click(function(){
    $('header nav').toggleClass('shownav');
  });
  var myWidth = 0;
  function getSize(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
  };
  var m = $('#main'),
      a = $('#asidepart'),
      c = $('.closeaside'),
      o = $('.openaside');
  $(window).resize(function(){
    getSize(); 
    if (myWidth >= 1024) {
      $('header nav').removeClass('shownav');
    }else
    {
      m.removeClass('moveMain');
      a.css('display', 'block').removeClass('fadeOut');
      o.css('display', 'none');
      
      $('#toc.toc-aside').css('display', 'none');
        
    }
  });
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    m.addClass('moveMain');
  });
  o.click(function(){
    o.css('display', 'none').removeClass('beforeFadeIn');
    a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');      
    m.removeClass('moveMain');
  });
  $(window).scroll(function(){
    o.css("top",Math.max(80,260-$(this).scrollTop()));
  });
});
</script>

<script type="text/javascript">
$(document).ready(function(){ 
  var ai = $('.article-content>iframe'),
      ae = $('.article-content>embed'),
      t  = $('#toc'),
      h  = $('article h2')
      ah = $('article h2'),
      ta = $('#toc.toc-aside'),
      o  = $('.openaside'),
      c  = $('.closeaside');
  if(ai.length>0){
    ai.wrap('<div class="video-container" />');
  };
  if(ae.length>0){
   ae.wrap('<div class="video-container" />');
  };
  if(ah.length==0){
    t.css('display','none');
  }else{
    c.click(function(){
      ta.css('display', 'block').addClass('fadeIn');
    });
    o.click(function(){
      ta.css('display', 'none');
    });
    $(window).scroll(function(){
      ta.css("top",Math.max(140,320-$(this).scrollTop()));
    });
  };
});
</script>







  </body>
</html>
